<template>
    <view>
        <cu-custom style="height: 0px;" bgColor="bg-gradual-blue" :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">满意度调查</block>
        </cu-custom>
        <view class="content">
            <view class="each">
                <view class="repairType">打分</view>
                <view class="repairBox personBox">
                    <view class="slider-and-input">
                        <input v-model="value" type="number" placeholder="请输入分数" style="width: 60px; margin-left: 10px;" @input="inputOnChange" />
                    </view>
                </view>
            </view>
            <view class="each">
                <view class="repairType">评论内容</view>
                <view class="repairBox personBox">
                    <view class="uni-textarea" style="width: 100%;">
                        <textarea v-model="CommentContent" placeholder="请输入评价" style="text-align: left;padding: 10rpx;width: 100%;"/>
                    </view>
                </view>
            </view>
            
            <view class="publish-goods-wrap">
                <view class="publish-goods-btn" @click="sub">提交</view>
            </view>
        </view>
    </view>
</template>

<script>
import request from '@/common/request.js';
export default {
    data() {
        return {
            id:0,
            value: 90,
            CommentContent:''
        };
    },
    onLoad(option) {
        this.id=option.id
    },
    methods: {
        sliderOnChange(e) {
            let that = this;
            that.value = e;
            this.updateCommentContent();
        },
        inputOnChange(e) {
            let inputValue = parseInt(e.target.value);
            if (!isNaN(inputValue) && inputValue >= 0 && inputValue <= 100) {
                this.value = inputValue;
                this.updateCommentContent();
            }
        },
        updateCommentContent() {
            let that = this;
            if (that.value >= 0 && that.value <= 30) {
                that.CommentContent = '有待改进';
            } else if (that.value >= 31 && that.value <= 80) {
                that.CommentContent = '很专业,态度很棒,好评！';
            } else if (that.value >= 81 && that.value <= 100) {
                that.CommentContent = '快速、高效、专业，服务非常棒!';
            }
        },
        // 提交表单
        sub() {
            let that = this;
            if (that.value === 0) {
                uni.showToast({ title: '请打分', icon: 'none' });
                return false;
            }
			if (that.value<=0||that.value>=101){
				uni.showToast({ title: '请填写1-100数字', icon: 'none' });
				return false;
			}
            uni.showLoading({
                title: '提交中...'
            });
            // 加载人员数据
            let opts = {
                url: 'api/AddSatisfaction',
                method: 'get'
            };
            let requestData = {
                qrcodeId: that.id,
                CommentRate: that.value,
                CommentContent: that.CommentContent
            };
            request.httpTokenRequest(opts, requestData).then(res => {
                uni.hideLoading();
                if (res.data.code === 1) {
                    uni.showToast({ title: '评论成功', icon: 'none' });
                    setTimeout(() => {
                        uni.reLaunch({
                            url: '/pages/index/tabbar?PageCur=' + 'home'
                        });
                    }, 1000);
                } else {
                    uni.showToast({ title: res.data.msg, icon: 'none' });
                }
            });
        }
    }
};
</script>

<style lang="less">
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 30rpx;
}

.each {
    width: 100%;
    margin-bottom: 10rpx;
}

.repairBox {
    margin: 0 auto;
}

.repairType {
    border-radius: 16rpx 16rpx 0 0;
    box-sizing: border-box;
    width: 94%;
    margin: 0 3%;
    background-color: #fff;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 25rpx;
    font-weight: 700;
    font-size: 30rpx;
    border-bottom: 1px solid rgba(242, 242, 242, 1);
}

.repairBox {
    border-radius: 0 0 16rpx 16rpx;
    box-sizing: border-box;
    width: 94%;
    padding: 25rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    text-align: center;
    .selectType {
        width: 26%;
        height: 60rpx;
        line-height: 60rpx;
        color: #409eff;
        background-color: #f6faff;
        border: 1px solid rgba(160, 207, 255, 1);
        border-radius: 5px;
    }
    .eachType {
        width: 26%;
        height: 60rpx;
        line-height: 60rpx;
        color: #999999;
        background-color: #fff;
        border: 1px solid rgb(233, 233, 233);
        border-radius: 5px;
        font-size: 26rpx;
    }
}

.slider-and-input {
    display: flex;
    align-items: center;
}

.publish-goods-wrap {
    background: rgba(255, 255, 255, .5);
    padding: 24rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.publish-goods-btn {
    margin: 24rpx;
    background: #0079FE;
    color: #FFFFFF;
    height: 82rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 82rpx;
}

.goods-empty-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40%;
}
</style>
    